relay-style pagination
parameter
table:parameters
params type null description
first int yes 取得件数
last int yes 取得件数
before string yes 基準とするcursor
after string yes 基準とするcursor
例 (a,b,c,d,eのcursorを持つデータが返ってくる)
1. 何も指定しない (deprecated)
{} -> "a","b","c","d","e"
1. first のみ指定
結果の最初からfirst件取得する
{ first: 3 } -> "a","b","c"
2. last のみ指定
結果の最後からlast件取得する
{ last: 3 } -> "c","d","e"
3. first + after を指定
afterより後からfirst件取得する
{ first: 3, after: "a" } -> "b","c","d"
4. last + before を指定
beforeより前のlast件取得する
{ last: 2, before: "d" } -> "b","c"
5. 以下はユースケースがわからない
before
after
first+before
first+after
first+last
before+after
schema
code:pagination.graphql
interface Connection {
pageInfo: PageInfo!
}
interface Edge {
cursor: String!
node: Node!
}
interface Node {
identifier: ID!
}
type PageInfo {
startCursor: String! // 最初のedgeが持つcursor
endCursor: String! // 最後のedgeが持つcursor
hasNextPage: Boolean! // firstを指定した時、次のページがあるとtrueを返す
hasPreviousPage: Boolean! // lastを指定した時、次のページがあるとtrueを返す
}
code:movie.graphql
// server side
type MovieConnection implements Connection {
pageInfo: PageInfo!
}
type MovieEdge implements Edge {
cursor: String!
node: Movie!
}
type Movie implements Node {
identifier: String!
}
input MovieInput {
first: Int
last: Int
before: String
after: String
}
code:movie.graphql
// client side
query movies($first, $last, $before, $after) {
movies(first: $first, last: $last, before: $before, after: $after) {
pageInfo {
startCursor
endCursor
hasNextPage
hasPreviousPage
}
edges {
cursor
node {
title
}
}
}
}
参考